<script lang="ts" setup>
import type { PageDTO } from '@/type/type'
import { useScrollStore } from '@/stores/scroll'

const scrollStore = useScrollStore()

const page = ref<PageDTO>({
  size: 10,
  current: 1,
  param: {}
})

const pageChange = (currentPage: number) => {
  page.value.current = currentPage
}

const { total } = defineProps({
  total: {
    type: Number,
    required: true
  }
})

const emit = defineEmits(['update'])
watch(
  () => page.value,
  () => {
    if (scrollStore.scroll.scrollRef) {
      scrollStore.scroll.scrollRef.scrollTo({
        top: 0,
        behavior: 'smooth'
      })
    }
    emit('update', toRaw(page.value))
  },
  {
    deep: true
  }
)
</script>

<template>
  <el-container class="items-center gap-3 px-5">
    <el-pagination
      v-model:current-page="page.current"
      v-model:page-size="page.size"
      :page-sizes="[10, 30, 50]"
      :total="total"
      background
      layout="total, sizes, prev, pager, next, jumper"
      @currentChange="pageChange"
    />
  </el-container>
</template>

<style lang="scss" scoped></style>
